<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate" />
    <meta http-equiv="Pragma" content="no-cache" />
    <meta http-equiv="Expires" content="0" />
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title>快捷开店</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link href="./css/mui.picker.min.css" rel="stylesheet" />
    <link href="./css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" href="./css/public.css?v=20181211" />
    <link rel="stylesheet" href="./css/edit-address.css?v=20181211" />
    <link rel="stylesheet" href="./css/cxvalidation.css">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=RHHBZ-K26W6-CPISS-ENGXG-HVCRS-QJFQT&libraries=drawing,geometry,autocomplete,convertor"></script>
    <script type="text/javascript" src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>
    <script src='./js/jquery-3.2.1.min.js'></script>
    <script src="./js/mui.min.js"></script>
    <script src="./js/art-template.js"></script>
    <script src="./js/cxvalidation.js"></script>
    <script src="./js/config.js?v=20181211"></script>
    <script src="./js/mui.picker.js"></script>
    <script src="./js/mui.poppicker.js"></script>
    <script src="./js/city.data.js" type="text/javascript" charset="utf-8"></script>
    <script src="./js/city.data-3.js" type="text/javascript" charset="utf-8"></script>

</head>
<style type="text/css">
    #save{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: #25bdef;
        height: 3rem;
        color: #fff;
        width: 100%;
    }
    .search{
        position: absolute;font-size: 1rem;z-index: 5;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center;
    }

    .search_choosed{
        width: 100%;
        color:  #fff;
        background: #25bdef;
        display: flex;
        display: -webkit-flex;
        justify-content: space-between;
        -webkit-justify-content: space-between;
        /*flex-direction: row-reverse;
        -webkit-flex-direction: row-reverse;*/
    }
    .search_i{
        padding: 0.5rem 1rem;
    }
    .search_i_black{
        padding: 0.5rem 1rem;position: absolute;font-size: 1rem;z-index: 4;
    }
    .search_choosed input{
        margin-left: 1rem;
    }


    .choose_addr_list{
        position: fixed;
        top: 8rem;
        left: 0;
        /* right: 0; */
        right: 0;
        bottom: 0rem;
        /* background: #fff; */
    }
    .scroll{
        overflow-y: scroll;
    }
    .address-choose{
        border-bottom: 1px solid #ccc;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center
    }
    .chacha{
        width: 100%;
        height: 1.5rem;
        position: relative;
        z-index: 10;
    }
    .chacha_div{
        position: absolute;right: 0.5rem;top: 0.3rem;
    }
    .chacha_img{
        width: 1.5rem;height: 1.5rem;border-radius: 50%;border: 1px solid #ccc;display:  flex;align-items:  center;justify-content: center;
    }
    .scroll{
        background: #fff;
        position: absolute;
        /* top: 4.1rem; */
        left: 0;
        right: 0;
        bottom: 3rem;
        height: 14rem;
    }

    .fa-choosed{
        padding: 0.5rem 1rem;
    }

    .address-choose{
        border-bottom: 1px solid #ccc;display: flex;display: -webkit-flex;align-items: center;-webkit-align-items: center
    }
    .radio{
        width: 1rem;
        height: 1rem;
        border: 1px solid #ccc;
        border-radius: 999px;
        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;
        justify-content: center;
        -webkit-justify-content: center;
    }
    .address{
        margin-left: 0.5rem
    }
    .active{
        background: #f1f1f1;
    }
    .img_cuo{
        width: 1rem;
        position: absolute;
        right: 1rem;
        display: none;
    }

    .buttom_sure{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        width: 100%;
        height: 3rem;
    }
    body{
        font-size: 1rem!important;
    }
    .body_pad{
        padding: 0.5rem 1rem;
    }

    .check-tips{
        position: fixed;
        left: 30%;
        bottom: 5rem;
        font-size: 0.8rem;
        padding: 0.5rem 1rem;
        background: #777575;
        border-radius: 8px;
        color: #fff;
    }

    .form-item{

        display: flex;
        display: -webkit-flex;
        align-items: center;
        -webkit-align-items: center;

        padding: 0.5rem 0;
        border-bottom: 1px solid #eee;
    }
    .form-item label{
        width: 24%;
    }
    .form-item .controls{
        width: 74%;
    }
    .form-item input{
        border: none;
        width: 100%;
        height: 100%;
        outline: none;
        font-size: 1rem;
        margin-bottom: 0!important;
    }
    #submit{
        width: 100%;
        height: 3.3rem;
        position: fixed;
        bottom: 0;
        left: 0;
        font-size: 1.2rem;
        border: none;
        background: rgba(253, 61, 0, 0.9);
        color: #fff;
    }

    .border_active{
        border-bottom: 1px solid #25bdef;
    }
    #getCode{
        font-size: 0.8rem;color: #25bdef;padding: 1rem 0;
    }

    .promit{
        /*height: 30px;*/
        background-color: orange;
        color: white;
        text-align: center;
        margin: 0;
        width: 100%;
        /*line-height: 30px;*/
        padding: 0;
        font-size: 0.9rem;
    }
    p{margin: 0;padding: 0.2rem}
</style>
<body id="login-page" style="background:#fff;background-color:fff">
<div id="main-content">
    <div class='promit'><p style="color: #fff">水站命名规则：命名后不可修改</p><p style="color: #fff">真实水站名称或街道/小区/商圈 + 水站</p></div>
    <!-- 主体 -->
    <div class="login-body" id="add">
        <div class="body_pad">
            <div class="login-main pr">
                <form method="post"  id='myform'>
                    <!-- 基础 -->
                    <div id="tab1" class="tab-pane in tab1" style="overflow-y: auto;margin-bottom: 4rem">
                        <div class="form-item border_active">
                            <label class="item-label">
                                水站名称<!-- <span class="check-tips">（名称不能为空）</span> -->
                            </label>
                            <div class="controls">
                                <input data-validation="required,maxSize[13]" data-validation-message='{"required":"请填写水店名称","maxSize":"水站名称最多13个字符"}' type="text" name="shop_name" class="text input-large shop_name" placeholder="请输入水站名称" value="">
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                老板姓名<!-- <span class="check-tips">（经营者姓名不能为空）</span> -->
                            </label>
                            <div class="controls">
                                <input data-validation="required,maxSize[5]" data-validation-message='{"required":"请填写经营者姓名","maxSize":"经营者姓名最多5个字符"}' type="text" name="boss_name" class="text input-large" placeholder="请输入经营者姓名"
                                       value="">
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                图 形 码
                            </label>
                            <div class="controls" style="display: flex;display: -webkit-flex">
                                <input data-validation="required" data-validation-message='{"required":"请输入图形验证码"}' type="text" name="verify" class="text input-large verify" placeholder="请填写图形验证码" />
                                <img class="verify_img" style="width: 5rem;height:3rem " src="https://www.yuvico.cn/captcha">
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                手 机 号<!-- <span class="check-tips">（请输入手机号）</span> -->
                            </label>
                            <div style="width: 50%">
                                <input id="shop_phone" data-validation="required,call[is_mobile]" data-validation-message='{"required":"请填写经营者联系方式"}' type="text" name="shop_phone" class="text input-large shop_phone" placeholder="请输入联系方式"
                                       value="">
                            </div>
                            <span id="getCode">获取验证码</span>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                动 态 码<!-- <span class="check-tips">（请输入店铺账号）</span> -->
                            </label>
                            <div class="controls">
                                <input data-validation="required" data-validation-message='{"required":"请填写手机验证码"}' type="text" name="captcha" class="text input-large captcha" placeholder="请填写手机验证码" />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                后台账号<!-- <span class="check-tips">（请输入店铺账号）</span> -->
                            </label>
                            <div class="controls">
                                <input data-validation="required,minSize[3],maxSize[20]" data-validation-message='{"required":"请填写后台账号","minSize":"账号长度，应为3-20个字符","maxSize":"账号长度，应为3-20个字符"}' type="text" name="username" class="text input-large account_name" placeholder="请填写手机号作为后台账号" />
                            </div>
                        </div>

                        <div class="form-item">
                            <label class="item-label">
                                地址<!-- <span class="check-tips"></span> -->
                            </label>
                            <div class="controls">
                                <input data-validation="required" class='area_info' id="area_info" data-validation-message='{"required":"请选择地址"}' type="text" name="area_info" class="text input-large account_name" placeholder="请选择地址" />
                            </div>
                        </div>
                        <div class="form-item">
                            <label class="item-label">
                                详细地址<!-- <span class="check-tips">（地址不能为空）</span> -->
                            </label>
                            <div class="controls">
                                <input id="address" data-validation="required,maxSize[50]" data-validation-message='{"required":"请填写详细地址","maxSize":"店铺详细地址最多50个字符"}' type="text" name="address" class="text input-large"
                                       placeholder="请填写水站详细地址"
                                       value="">
                            </div>
                        </div>

                    </div>
                    <div class='sure-submit' style="position: fixed">
                        <input type="hidden" name="shop_position" id="shop_position">
                        <input type="hidden" name="province" id="province">
                        <input type="hidden" name="city" id="city">
                        <input type="hidden" name="area" id="area">
                        <input type="hidden" name="type" value="simple" />
                        <input type="hidden" name="aid" value="" id="aid"/>
                        <button id='button' type="submit">保存</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <div id="latLng" style="display: none">
        <div id="map">
            <div class="search" style="height: 2.5rem;width: 100%;color: #fff;background: #25bdef;">
                <div class="toHistory" style="    padding: 0.5rem 1rem;width: 13%">
                    <i class="fa fa-chevron-left"></i>
                </div>
                <div class="for-search" style="width: 87%;display: flex;display: -webkit-flex">
                    <input style="background: #fff;height: 1.8rem!important;font-size: 0.9rem" type="text" placeholder="请输入搜索地址">
                    <i class="fa fa-search fa-choosed for-search"></i>
                </div>
            </div>
            <div style="width:100%;height: 560px" id="container"></div>

            <div class="scroll">
                <div style="text-align: center;color: #25bdef;padding: 1rem 0 0.5rem 0;font-size: 1rem;border-bottom: 2px solid #eee">请选择地址</div>
                <div class="content" id="choose" style="padding: 1rem">
                </div>
            </div>
            <button type="button" class="choose_end mui-btn-blue buttom_sure">完成</button>
        </div>
        <div id="search" style="display: none">
            <div class="search search_choosed " style="background: #fff;padding: 0 1rem;position: fixed;top: 0;left: 0;right: 0;height: 3rem;background: #f1f1f1">
                <i style="color: #2d2d2d" class="fa fa-chevron-left for-map"></i>
                <input type="text" id="search_address" class="search_address" style="font-size: 0.8rem;color: #2d2d2d;border: none;height: 2rem!important;background: #f1f1f1" placeholder="请输入搜索地址(如：xx市xx)">
                <img class="img_cuo" src="image/cuo.png">
            </div>
            <div style="overflow-y: scroll;margin-top: 3.5rem">
                <div class="content" id="choose_search">

                </div>
            </div>
        </div>
    </div>
    <script type="text/html" id="choose-content">
        {{each nearPois as near index}}
        <div style="border-bottom: 3px solid #f1f1f1" class="address-choose" id="address-choose{{index}}" data-index="{{index}}">
            <div class="address">
                <p>{{near.name}}</p>
                <p style="color: #9a9a9a">{{near.address}}</p>
            </div>
        </div>
        {{/each}}
    </script>
    <script type="text/html" id="choose-content-search">
        {{each data as near index}}
        <div style="border-bottom: 3px solid #f1f1f1" class="address-choose-search" id="address-choose-search{{index}}" data-index="{{index}}">
            <div class="address">
                <p>{{near.title}}</p>
                <p style="color: #9a9a9a">{{near.address}}</p>
            </div>
        </div>
        {{/each}}
    </script>
</div>

<script src='js/commen.js?v=20181211'></script>
<script src='js/simple.js?v=20181211'></script>
</body>
</html>
